<template>
  <div class="card-wrapper" @click="handleDetail(info)">
    <ul border-bottom-1px
        class="container">
      <li class="item">
        <div class="item-title">编号</div>
        <div class="item-desc">{{ info.order_no }}</div>
      </li>
      <li class="item">
        <div class="item-title">手机</div>
        <div class="item-desc">{{ info.reserve_contact_phone ? info.reserve_contact_phone : ''}}</div>
      </li>
      <li class="item">
        <div class="item-title">名称</div>
        <div class="item-desc">{{ info.order_name }}</div>
      </li>
      <li class="item">
        <div class="item-title">金额</div>
        <div class="item-desc">{{ info.amount }}</div>
      </li>
      <li class="item">
        <div class="item-title">数量</div>
        <div class="item-desc">{{ info.count }}</div>
      </li>
    </ul>
    <div class="operation">
      <div class="item-title">操作</div>
      <div v-if="info.status === 1 && info.is_deal === 1" class="operation-item red" @click.stop="handleConsumed(info)">
        <svg-icon icon-class="edit"
                  class-name="custom-class"
                  class="home-icon" />
        <p>核销</p>
      </div>
      <div v-if="info.status === 2 && info.is_deal === 1 && info.sub_type === 1" class="operation-item red" @click.stop="handleLeave(info)">
        <svg-icon icon-class="edit"
                  class-name="custom-class"
                  class="home-icon" />
        <p>离店</p>
      </div>
      <div v-if="info.status === 1 && info.is_deal === 0" class="operation-item blue" @click.stop="handleDeal(info)">
        <svg-icon icon-class="order"
                  class-name="custom-class"
                  class="home-icon" />
        <p>接单</p>
      </div>
      <div v-if="info.status === 3 && info.sub_type !== 1" class="operation-item green">
        <svg-icon icon-class="order"
                  class-name="custom-class"
                  class="home-icon" />
        <p>已核销</p>
      </div>
      <div v-if="info.status === 3 && info.sub_type === 1" class="operation-item green">
        <svg-icon icon-class="order"
                  class-name="custom-class"
                  class="home-icon" />
        <p>已离店</p>
      </div>
    </div>
  </div>
</template>

<script>
import { dealOrder, leaveShop } from '@/api/order'
export default {
  name: 'Card',
  props: {
    infos: {
      type: Object,
      default () {
        return {}
      }
    },
    index: {
      type: Number,
      dafault: 0
    }
  },
  data () {
    return {
      info: {}
    }
  },
  created () {
    this.info = this.infos
  },
  methods: {
    handleConsumed (info) {
      this.$emit('consumed', info.sub_type)
      this.$store.dispatch('home/setIndex', this.index)
    },
    handleDetail (info) {
      const orderId = info.order_no
      this.$router.push({
        path: `/detail/${orderId}`
      })
    },
    // 接单
    async handleDeal (info) {
      this.$toast.loading({
        message: '接单中',
        duration: 1000
      })
      const orderId = info.order_no
      try {
        await dealOrder({ order_no: orderId })
        this.info.is_deal = 1
        this.$toast.success({
          message: '接单成功',
          duration: 1000
        })
      } catch (error) {
        console.log(error)
      }
    },
    // 离店
    async handleLeave (info) {
      const orderNo = info.order_no
      await leaveShop({ order_no: orderNo })
      this.$toast.success({
        message: '离店成功',
        duration: 1000
      })
      this.info.status = 3
      this.$store.dispatch('home/setIndex', this.index)
      this.$store.dispatch('home/setIsDelete', true)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.card-wrapper
  width 100%
  background-color $common_bgc
  box-shadow 0px 2px 8px 0px rgba(22, 25, 31, 0.08)
  border-radius 20px
  padding-top 20px
  padding-left 20px
  padding-right 20px
  box-sizing border-box
  box-shadow 0px 2px 8px 0px rgba(22, 25, 31, 0.08)
  margin-bottom 26px

  .container
    width 100%
    padding-bottom 14px
    box-sizing border-box

    .item
      display flex
      align-items center
      height 56px
      padding-left 16px
      padding-right 16px
      box-sizing border-box

      .item-title
        font-size $home_card_size
        color $home_font_color

      .item-desc
        flex 1
        min-width 0
        ellipsis()
        margin-left 48px
        font-size $home_size
        color $home_header_font_color

  .operation
    display flex
    align-items center
    justify-content space-between
    height 80px
    padding-left 16px
    padding-right 16px
    box-sizing border-box

    .item-title
      font-size $home_size
      color $home_header_font_color

    .operation-item
      display flex
      height 100%
      align-items center
      font-size $home_size

      .home-icon
        width 22px
        height 24px
        margin-right 4px

    .red
      color $untreated_font_color

    .blue
      color $primary
    .green
      color $audit_font_color
</style>
